import gsap from 'gsap';
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
let loadingConfig = [
    {
        key: 'appStore',
        msg: 'store初始化'
    },
    {
        key: 'appStoreF',
        msg: 'store初始化完成'
    },
    {
        key: 'appConfig',
        msg: '配置初始化'
    },
    {
        key: 'appConfigF',
        msg: '初始化配置完成'
    },
    {
        key: 'appCore',
        msg: '内核初始化'
    },
    {
        key: 'appCoreF',
        msg: '初始化内核完成'
    },
    {
        key: 'beforePageEnter',
        msg: '页面准备进入'
    },
    {
        key: 'dataInit',
        msg: '数据初始化'
    },
    {
        key: 'dataReady',
        msg: '数据准备完成'
    },
    {
        key: 'imgResource',
        msg: '图片资源加载'
    },
    {
        key: 'fontResource',
        msg: '字体资源加载'
    },
    {
        key: 'other',
        msg: '正在加载其他资源'
    }
];

export function loadProcessBar(startNum: number) {
    let appLoading = document.getElementById("appLoading");
    let time = 0;
    let timeInterval = 0.05;
    let processAnimate = document.getElementById("process-animate");
    let resourceText = document.getElementsByClassName("resource-text")[0];
    let resourceTextNum = document.getElementsByClassName("resource-text-num")[0];
    // @ts-ignore
    appLoading.style.display = "block";
    let processBar = gsap.timeline({
        onUpdate: function () {
            // @ts-ignore
            let width = Math.ceil(processAnimate.style.width.replace("%", ""));
            resourceTextNum.innerHTML = width + "%"
            if (width == 100) {
                resourceText.innerHTML = "系统加载完成...";
            } else {
                let dix = Math.floor(width / (100 / loadingConfig.length));
                resourceText.innerHTML = loadingConfig[dix].msg;
            }

        },
        onStart: function () {
            if (startNum == undefined) {
                startNum = 2;
            }
            // @ts-ignore
            processAnimate.style.width = (startNum) + "%"

        }
    });
    for (let i = 0; i < loadingConfig.length; i++) {
        time = time + timeInterval;
        processBar.to("#process-animate",
            {duration: .05, width: (100 / loadingConfig.length * (i + 1)) + "%"},
        )
        // @ts-ignore
        processAnimate.style.width = (100 / loadingConfig.length * (i + 1)) + "%"
    }
}

export function hideProcessBar() {
    let appLoading = document.getElementById("appLoading");
    // @ts-ignore
    appLoading.style.display = "none";
}

export function NProgressStart(){
    // @ts-ignore
    NProgress.start();
}

export function NProgressEnd(){
    // @ts-ignore
    NProgress.done();
}
